extends ../../src/pug/index.pug
block body
  +move-unfold({cover: 0, display: 1, imgs: [0, 1, 2], moveto: 'right'})
  +move-unfold({cover: 0, display: 1, imgs: [0, 1, 2],})

  +slide-match([0, 1, 2])

  // -image elem cobination foreign components
  +svg-elem({width: 1080, height:1920})
    +foreign({img: 2})
  
  // long-touch for show background
  +click-extends({cover: 2, tip: 1, heights: [3, 6]})
    +slide-match({imgs: [3, 5, 6], bg: 4})
    +images([7])

  // long-touch for show background
  +svg-elem(0)
   +foreign({img: 1})

  // -exptends-chain
  -var contentHeight = 0
  -var imgs = [0, 1]
  for idx in imgs
    -contentHeight += images[imgs[idx]].height
  +chain-extends({cover: 0, contentHeight})
    block content
      +images([2, 1,])
      +slide({imgs:[0, 1, 2], back:1})
    block cover
      g
        +svg-elem({width: 1080, height:1920})
          +foreign({img: 2})
          g
            +foreign({img: 1})
            animate(attributeName=`opacity`, values=`1;0.2;1`, begin=`0s`, dur=`1.4s`, repeatCount=`indefinite`)
          rect(x=`0`, y=`1299`, width=`1080`, height=`1920`, style=`pointer-events:painted;opacity:0`)
          animateTransform(attributeName=`transform`, type=`translate`, values=`2000 0`, begin=`click`, dur=`0.1s`, fill=`freeze`, restart=`never`)
        animate(attributeName=`opacity`, values=`1;0`, begin=`click`, dur=`0.5s`, fill=`freeze`, restart=`never`)
        animateTransform(attributeName=`transform`, type=`translate`, values=`999999999 0`, begin=`click+0.5`, dur=`0.1s`, fill=`freeze`, restart=`never`)

